<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="500px">
         <el-form :model="dialogForm" size="small" :rules="rules" ref="dialogFormRef">
            <el-form-item prop="fileName" label="文件名称">
                 <el-input v-model="dialogForm.fileName" :disabled="type === 'view'" placeholder="请输入"/>
             </el-form-item>
             <el-form-item prop="fileCode" label="文件编码">
                 <el-input v-model="dialogForm.fileCode" :disabled="type === 'view'" placeholder="请输入"/>
             </el-form-item>
             <el-form-item prop="fileVersion" label="文件版本">
                 <el-input v-model="dialogForm.fileVersion" :disabled="type === 'view'" placeholder="请输入"/>
             </el-form-item>
             <el-form-item prop="provisionCode" label="条款编码">
                 <el-input v-model="dialogForm.provisionCode" :disabled="type === 'view'" placeholder="请输入"/>
             </el-form-item>
             <el-form-item prop="provisionContent" label="条款要求">
                 <el-input v-model="dialogForm.provisionContent" :disabled="type === 'view'" type="textarea" :autosize="{minRows:2}" placeholder="请输入"/>
             </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
             <el-button @click="handleClose">取 消</el-button>
             <el-button type="primary" @click="handleSure" v-if="type !== 'view'">确 定</el-button>
         </span>
     </el-dialog>
 </template>
 
 <script>
 import { addProvision,editProvision } from '@/api/clauseLibrary.js'
 export default {
 name:'clauseLibraryDialog',
 props:{
     type:{
         type:String,
         default:'add'
     },
     datas:{
         type:Object,
         default:()=>({})
     }
 },
 data () {
     return {
         title:'',
         dialogVisible:true,
         dialogForm:{
             id: undefined,
             fileName:'',
             fileCode: '',
             fileVersion:'',
             provisionCode: '',
             provisionContent: '',
         },
         rules:{
            provisionCode:[{ required: true, message: '条款编码不能为空', trigger: 'blur' }],
            provisionContent:[{ required: true, message: '条款内容不能为空', trigger: 'blur' }],
            // fileName:[{ required: true, message: '文件名称不能为空', trigger: 'blur' }],
            // fileCode:[{ required: true, message: '文件编码不能为空', trigger: 'blur' }]
         },
     }
 },
 mounted () {
     this.initData()
 },
 methods: {
     initData(){
        this.dialogForm = {
            id: this.datas.id,
            fileName: this.datas.fileName,
            fileCode: this.datas.fileCode,
            fileVersion: this.datas.fileVersion,
            provisionCode: this.datas.provisionCode,
            provisionContent: this.datas.provisionContent
        }
     },
     handleClose(){
         this.$emit('on-close')
     },
     handleSure(){
         this.$refs.dialogFormRef.validate((valid) => {
           if (valid) {
             if(this.type === 'edit'){
                editProvision(this.dialogForm).then(res => {
                     this.$message.success('编辑成功！')
                     this.$emit('on-sure')
                     this.handleClose()
                 })
             }else{
                addProvision(this.dialogForm).then(res => {
                     this.$message.success('新增成功！')
                     this.$emit('on-sure')
                     this.handleClose()
                 })
             }
           } else {
             this.$message.error('请填写必填信息！')
             return false;
           }
         });
     }
 }
 }
 </script>
 
 <style scope>
 .symbol-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
   }
   .symbol-uploader .el-upload:hover {
     border-color: #409EFF;
   }
   .symbol-uploader-icon {
     font-size: 28px;
     color: #8c939d;
     width: 50px;
     height: 50px;
     line-height: 50px;
     text-align: center;
   }
   .symbol {
     width: 50px;
     height: 50px;
     display: block;
   }
 </style>